<template>
  <div class="container">
    <div class="user-detail">
      <div class="user-detail__img">
        <img  src="../assets/head.jpg" height="334" width="334" alt="">
      </div>
      <div class="user-detail__message">
        <p class="user-detail__message__name">{{accountInfo.displayName}}<span v-text="accountInfo.userName"></span></p>
        <p class="user-detail__message__phone">邮箱：<span v-text="accountInfo.email"></span></p>
      </div>
    </div>

    <div class="profile">
      <router-link class="mint-cell" :to="{name: 'profile'}">
        <span class="mint-cell-mask"></span>
        <div class="mint-cell-wrapper">
          <div class="mint-cell-title">
              <span class="fa-stack fa-sm" style="color: #FA6E4E">
                <i class="fa fa-user fa-stack-2x"></i>
              </span>
            <span class="mint-cell-title-text">个人资料</span>
          </div>
          <i class="mint-cell-allow-right"></i>
        </div>
      </router-link>
      <router-link class="mint-cell" :to="{name: 'changePwd'}">
        <span class="mint-cell-mask"></span>
        <div class="mint-cell-wrapper">
          <div class="mint-cell-title">
              <span class="fa-stack fa-sm" style="color: #55CF9C">
                <i class="fa fa-lock fa-stack-2x"></i>
              </span>
            <span class="mint-cell-title-text">密码修改</span>
          </div>
          <i class="mint-cell-allow-right"></i>
        </div>
      </router-link>
    </div>

    <div class="btn-warp">
      <mt-button type="default" size="large" @click.native="handleLogout">安全退出</mt-button>
    </div>
  </div>
</template>
<script>
  import { MessageBox } from 'mint-ui';
  import fetch from '../utils/fetch'
  export default{
    name: 'mine',
    data(){
      return{
        accountInfo: ''
      }
    },
    methods:{
      handleGetAccountInfo (){
        fetch('/api/account/info').then(response =>{
          if (response.data.success) {
            this.accountInfo = response.data.obj
          }
        })
      },
      handleLogout(){
        MessageBox.confirm('确定退出?').then(action => {
          if (action == 'confirm') {
            fetch.post('/logout').then(response =>{
              this.$store.dispatch('destorySid')
              this.$router.replace('/login')
            })
          }
        }).catch(err => {
          if (err == 'cancel') {
          }
        });
      }
    },
    mounted(){
      this.handleGetAccountInfo()
    }
  }
</script>
<style scoped lang="scss">
  @import '../base/css/base.scss';
  .container{
    padding-bottom: 1.11rem;
    background: #F0EFF5;
    height: inherit;
    .user-detail {
      position: relative;
      height: 5.0rem;
      width: 100%;
      background: #26A2FF;
      color: #fff;
      @include flex-center;
      .user-detail__img{
        width:1.7625rem;
        height: 1.7625rem;
        margin:0 0.525rem;

        img{
          width: 100%;
          height: auto;
          border-radius:50%;
        }
      }
      .user-detail__message{
        flex:1;
        p{
          padding:0.2rem 0;
          @include fz(6px);
        }
      }
    }
    .profile, .setting{
      margin: 20px 0 0 0;
    }

    .btn-warp{
      margin: 20px 0;
    }
  }
</style>
